<template>
  <!-- 登录状态下 -->
  <div>
    <!-- 用户的头像姓名展示 -->
    <div class="user">
      <div class="img">
        <van-image
          round
          fit="cover"
          :src="users.img"
          @click="headClick"
          class="headImg"
        />
      </div>
      <div class="name">
         {{users.name}}
         <!-- 用户的认证图标 -->
        <van-image v-if="users.student_identification" :src="require('../assets/book.png')" class="identification" />
        <van-icon name="manager" v-if="users.people_identification" color="#00a8f3"/>
        <van-icon name="shop" v-if="users.shop_identification" color="#ff000a"/>
      </div>
    </div>
    <!-- 用户的个性签名、个人信息 -->
    <div class="signature" @click="signatureClick">
      <van-icon name="edit" class="signatureIcon" />
      {{users.signature}}
    </div>
    <!-- 用户的交易或者信息展示 -->
    <div class="information">
      <div class="publish">
        <h4>你发布的任务</h4>
        <!-- 在这个width: 100% 的div加上v-for循环数据显示-->
        <div style="width: 100%" v-if="accepts.length!=0">
          <div class="click" v-for="(accept,index) in publishs" :key="index" @click="getDetail(accept.id)">
            <div class="acceptTitle">
              {{accept.title}}
            </div>
            <div v-if="accept.style=='已完成'" style="color:green" >
              {{accept.style}}
            </div>
            <div v-if="accept.style=='进行中'" style="color:blue" >
              {{accept.style}}
            </div>
            <div v-if="accept.style=='等待中'" style="color:#ffc401" >
              {{accept.style}}
            </div>
          </div>
        </div>
        <div class="inform" v-else>
          暂无发布任务信息
        </div>
      </div>
      <div class="accept">
        <h4>你接收的任务</h4>
        <!-- 在这个width: 100% 的div加上v-for循环数据显示-->
        <div style="width: 100%" v-if="accepts.length!=0">
          <div  class="click" v-for="(accept,index) in accepts" :key="index" @click="getDetail(accept.id)">
            <div class="acceptTitle">
               {{accept.title}}
            </div>
            <div v-if="accept.style=='已完成'" style="color:green" >
              {{accept.style}}
            </div>
            <div v-if="accept.style=='进行中'" style="color:blue" >
              {{accept.style}}
            </div>
            <div v-if="accept.style=='已过期'" style="color:black" >
              {{accept.style}}
            </div>
          </div>
        </div>
        <div class="inform" v-else>
        暂无已接任务信息
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <div class="exit" @click="exitClick">
      退出登录
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant';
export default {
  name: "Slide",
  data() {
    return {
      isLogin:0,
      isPublish: true,
      isAccept: true,
      users:{},
      accepts:[],
      publishs:[]
    }
  },
  methods: {
    headClick() {
      this.$parent.popupShow = false
      this.$router.push({
        name: 'user',
        params: {
          userSelf: true,
          users: this.users
        }
      })
    },
    signatureClick() {
      console.log("修改个人信息被点击")
      this.$router.push({path: '/change'})
    },
    taskClick() {
      console.log("点击了右划栏内的任务")
    },
    exitClick() {
      this.$dialog.confirm({
        title: '提示',
        message: '确认要退出登录？',
      })
        .then(() => {
          this.$notify({
            type: 'primary',
            message:'已退出登录',
            duration: 1000
          })
        this.axios({
          method: "post",
          url: this.$store.state.url+"/auth/logout",
          headers:{
           'Authorization': localStorage.token
                }
        }).then((res) => {
            localStorage.token=""
            localStorage.username =""
            this.$store.state.token=''
            console.log(res.data)
        })
        this.$router.push('/login').catch(err => err)
        })
     
    },
    getDetail(id){
      this.$router.push({path:'/details',query:{id:id}})
    }
  },
  created(){
    if(localStorage.token){
      this.isLogin = 1
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      this.axios({
        method: "get",
        url: this.$store.state.url+"/auth/user/info",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
       
        if(res.data.data.img){
        res.data.data.img = "http://picture.105577.xyz/"+res.data.data.img;
        }
        this.users = res.data.data;
        localStorage.user = JSON.stringify(this.users);
        this.$store.state.user =  res.data.data;
      })
      this.axios({
        method: "get",
        url: this.$store.state.url+"/order/receiving/active",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
         var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "进行中",
            this.accepts.push(accept)
        }
      })
      this.axios({
        method: "get",
        url: this.$store.state.url+"/order/receiving/finish",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "已完成",
            this.accepts.push(accept)
        }
      })
       this.axios({
        method: "get",
        url: this.$store.state.url+"/order/user/overdue",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "已过期",
            this.accepts.push(accept)
        }
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
      this.axios({
        method: "get",
        url: this.$store.state.url+"/order/user/wait",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "等待中",
            this.publishs.push(accept)
        }
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
      this.axios({
        method: "get",
        url: this.$store.state.url+"/order/user/active",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "进行中",
            this.publishs.push(accept)
        }
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
      this.axios({
        method: "get",
        url: this.$store.state.url+"/order/user/finish",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        var accepts  = res.data.data;
        for(var accept of accepts){
            accept.style = "已完成",
            this.publishs.push(accept)
        }
        Toast.success('加载成功');
        Toast.clear();
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
    }else{
      this.$router.push('/login')
    }
    
  }
}
</script>

<style scoped>
  .user {  
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .img {
    text-align: center;
    padding: 15px 0;
  }
  .headImg {
    width: 80px;
    height: 80px;
    border: 1px solid #cccccc;
  }
  .name {
    text-align: center;
    font-weight: 900;
    line-height: 10px;
    color: rgb(255, 255, 255);
  }
  .identification {
    width: 18px;
    height: 18px
  }
  .signature {
    width: 60%;
    margin: 0 auto;
    padding: 15px;
    overflow: hidden;
    font-size: 13px;
    color: #fff;
    border-bottom: 1px solid #e6ff01;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .signatureIcon {
    font-size: 18px;
    vertical-align: text-bottom;
  }
  .information {
    width: 80%;
    height: 360px;
    margin: 15px auto;
    padding: 10px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    overflow: scroll;
  }
  .acceptTitle {
    font-weight: 510;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:50%;
    color:#008cff;
  }
  h4 {
    margin: 5px;
    color: #00a1ec;
  }
  .publish {
    border-bottom: 1px solid rgb(243, 243, 243);
    padding: 10px;
  }
  .accept {
    padding: 10px;
  }
  .exit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 30px;
    border-radius: 20px;
    font-size: 14px;
    margin: 0 auto;
    letter-spacing: 2px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(100, 100, 100);
    background: rgb(255, 255, 255);
  }
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin: 50px auto;
    border: 1px solid #06c5ff;
    box-shadow: 1px 1px 5px #008cff;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(to right, #00fff2, #00e5fa, #00a2ff, #008cff);
    background-size: 200% 200%;
    animation: bg 10s infinite;
  }
  .click{
    padding: 4px 8px;display: flex; justify-content: space-between; height:20px; border:1px solid #ffa861; border-radius:8px;margin:4px 2px;
    color: #ffc401;
  }
  @keyframes bg{
    0% {
      background-position: 0% 50%;
    }
    25% {
      background-position: 50% 100%;
    }
    50% {
      background-position: 100% 50%;
    }
    75% {
      background-position: 50% 0%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .inform{
   text-align: center;
   margin: 50px 0;
   font-size: x-large;
   color: #cccccc;
  }
</style>